<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body class="dpflex">
		<main>
			<!-- 轮播图区 -->
			<!-- Slider main container -->
			<div class="swiper mySwiper">
				<div class="swiper-wrapper">
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
					<div class="swiper-slide"></div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
			<section id="one" class="mb16 dpflex">
				<div id="rank" class="flex1-5 mr16 rel">
					<!-- 排名 -->
					<p>
						Today's<br />
						ranking
					</p>
					<p class="abs" id="rankNumber">9</p>
				</div>
				<div id="accumulated" class="flex2 rel">
					<!-- 打卡累计 -->
					<p>
						Clocking in for<br />
						<span id="clickDay">23</span>
						days
					</p>
					<p class="abs"><button id="clock">Clock</button></p>
				</div>
			</section>
			<section class="dpflex mb16" id="second">
				<div id="sportsData" class="flex1 mr16">
					<!-- 运动数据 -->
					<p class="">Sports Data</p>
				</div>
				<div id="badge" class="flex1 rel">
					<!-- 徽章累计 -->
					<p>Cumulative badges</p>
					<p class="abs"><span id="badgeNumber">3</span>Pieces</p>
				</div>
			</section>
			<section id="three" class="mb16">
				<div id="courseExcise">
					<!-- 课程训练 -->
					<p class="fc-write">Course Excise</p>
				</div>
			</section>

			<section id="four" class="mb16">
				<div id="run">
					<!-- 户外跑 -->
					<p class="fc-write">Running</p>
				</div>
			</section>
		</main>
		<footer class="dpflex"></footer>
	</body>
</html>
